    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旋转木马</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
           .box{
               width: 1200px;
               margin: 10px auto;
           }
           .wrap{
               position: relative;
               height: 300px;
           }
           .wrap ul{
               list-style: none;
           }
            .wrap ul li{
              position: absolute;
                top: 0;
                left: 200px;
                display: list-item;
            }
            .wrap ul li{
                width: 100%;
            }
            #arrow{
            opacity: 0;
            }
           #right{
                position: absolute;
                top: 150px;
                right: 10px;
               z-index: 1000;
            }
            #left{
                position: absolute;
                top: 150px;
                left: 10px;
                z-index: 1000;
            }
        </style>
        <script src="jQuery1.0.0.1.js"></script>
        <script src="旋转木马.js"></script>

    </head>
    <body>
    <div class="box">
        <div class="wrap">
            <ul>
                <li><a><img src="imgs/1.png" alt=""></a></li>
                <li><a><img src="imgs/2.png" alt=""></a></li>
                <li><a><img src="imgs/3.png" alt=""></a></li>
                <li><a><img src="imgs/4.png" alt=""></a></li>
                <li><a><img src="imgs/5.png" alt=""></a></li>
            </ul>
            <div class="btn" id="arrow">
                <img src="imgs/prev.png" alt="" id="left">
                <img src="imgs/next.png" alt="" id="right">
            </div>
        </div>
    </div>
    </body>
    </html>